WebXR 히트 테스트 결과: 몰입형 경험을 위한 레이 캐스팅 결과 처리

WebXR Device API는 브라우저 내에서 직접 몰입형 증강 현실(AR) 및 가상 현실(VR) 경험을 만들 수 있는 흥미로운 가능성을 열어줍니다. 대화형 WebXR 애플리케이션을 구축하는 기본 측면 중 하나는 히트 테스트 결과를 이해하고 효과적으로 활용하는 것입니다. 이 블로그 게시물은 레이 캐스팅을 통해 얻은 히트 테스트 결과를 처리하는 방법에 대한 포괄적인 가이드를 제공하여 WebXR 장면 내에서 직관적이고 매력적인 사용자 상호 작용을 만들 수 있도록 합니다.

레이 캐스팅이란 무엇이며 WebXR에서 왜 중요할까요?

레이 캐스팅은 특정 지점과 방향에서 시작되는 레이가 3D 장면의 객체와 교차하는지 확인하는 데 사용되는 기술입니다. WebXR에서 레이 캐스팅은 일반적으로 사용자의 시선이나 가상 객체의 궤적을 시뮬레이션하는 데 사용됩니다. 레이가 실제 표면(AR에서) 또는 가상 객체(VR에서)과 교차하면 히트 테스트 결과가 생성됩니다.

히트 테스트 결과는 다음과 같은 몇 가지 이유로 중요합니다.

• 가상 객체 배치: AR에서 히트 테스트를 사용하면 테이블, 바닥 또는 벽과 같은 실제 표면에 가상 객체를 정확하게 배치할 수 있습니다.
• 사용자 상호 작용: 사용자가 보고 있거나 가리키는 위치를 추적함으로써 히트 테스트를 통해 가상 객체를 선택, 조작 또는 활성화하는 등의 상호 작용이 가능합니다.
• 탐색: VR 환경에서 히트 테스트는 탐색 시스템을 구현하는 데 사용할 수 있으며, 사용자가 특정 위치를 가리켜 순간 이동하거나 장면 주위를 이동할 수 있습니다.
• 충돌 감지: 히트 테스트는 기본 충돌 감지에 사용할 수 있으며, 가상 객체가 다른 객체 또는 실제 세계와 충돌하는 시점을 결정합니다.

WebXR 히트 테스트 API 이해

WebXR 히트 테스트 API는 레이 캐스팅을 수행하고 히트 테스트 결과를 얻는 데 필요한 도구를 제공합니다. 주요 개념 및 기능은 다음과 같습니다.

XRRay

XRRay는 3D 공간에서 레이를 나타냅니다. 이는 원점과 방향 벡터로 정의됩니다. XRFrame.getPose() 메서드를 사용하여 XRRay를 만들 수 있으며, 이 메서드는 추적된 입력 소스(예: 사용자의 머리, 핸드 컨트롤러)의 포즈를 반환합니다. 포즈에서 레이의 원점과 방향을 파생할 수 있습니다.

XRHitTestSource

XRHitTestSource는 히트 테스트 결과의 소스를 나타냅니다. XRSession.requestHitTestSource() 또는 XRSession.requestHitTestSourceForTransientInput() 메서드를 사용하여 히트 테스트 소스를 만듭니다. 첫 번째 메서드는 일반적으로 사용자의 머리 위치와 같은 지속적인 소스를 기반으로 지속적인 히트 테스트에 사용되는 반면, 두 번째 메서드는 버튼 누름 또는 제스처와 같은 일시적인 입력 이벤트에 사용됩니다.

XRHitTestResult

XRHitTestResult는 레이와 표면 사이의 단일 교차점을 나타냅니다. 레이 원점에서 히트 지점까지의 거리와 장면의 참조 공간에서 히트 지점의 포즈와 같은 교차점에 대한 정보가 포함되어 있습니다.

XRHitTestResult.getPose()

이 메서드는 히트 지점의 XRPose를 반환합니다. 포즈에는 가상 객체를 배치하거나 다른 변환을 수행하는 데 사용할 수 있는 히트 지점의 위치와 방향이 포함됩니다.

히트 테스트 결과 처리: 단계별 가이드

WebXR 애플리케이션에서 히트 테스트 결과를 얻고 처리하는 과정을 살펴보겠습니다. 이 예제에서는 three.js 또는 Babylon.js와 같은 렌더링 라이브러리를 사용한다고 가정합니다.

1. 히트 테스트 소스 요청

먼저 XRSession에서 히트 테스트 소스를 요청해야 합니다. 이는 일반적으로 세션이 시작된 후에 수행됩니다. 히트 테스트 결과가 반환될 좌표계를 지정해야 합니다. 예를 들어:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

설명:

• xrSession.requestHitTestSource(): 이 함수는 XR 세션에서 히트 테스트 소스를 요청합니다.
• { space: xrSession.viewerSpace }: 이는 히트 테스트 결과가 반환될 좌표계를 지정합니다. viewerSpace는 뷰어의 위치를 기준으로 하는 반면 local은 XR 원점을 기준으로 합니다. 바닥을 기준으로 추적하려면 localFloor를 사용할 수도 있습니다.
• 오류 처리: try...catch 블록은 히트 테스트 소스 생성 중에 발생한 오류가 포착되고 기록되도록 합니다.

2. 애니메이션 루프에서 히트 테스트 수행

애니메이션 루프(각 프레임을 렌더링하는 함수) 내에서 XRFrame.getHitTestResults() 메서드를 사용하여 히트 테스트를 수행해야 합니다. 이 메서드는 장면에 있는 모든 교차점을 나타내는 XRHitTestResult 객체의 배열을 반환합니다.

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

설명:

• frame.getViewerPose(xrSession.referenceSpace): 뷰어(헤드셋)의 포즈를 가져옵니다. 뷰어가 어디에 있고 무엇을 보고 있는지 알기 위해 필요합니다.
• frame.getHitTestResults(xrHitTestSource): 이전에 생성된 히트 테스트 소스를 사용하여 히트 테스트를 수행합니다.
• hitTestResults.length > 0: 교차점이 있는지 확인합니다.

3. 히트 테스트 결과 처리

processHitTestResults() 함수는 히트 테스트 결과를 처리하는 곳입니다. 여기에는 일반적으로 히트 지점의 포즈를 기반으로 가상 객체의 위치와 방향을 업데이트하는 작업이 포함됩니다.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

설명:

• hitTestResults[0]: 첫 번째 히트 테스트 결과를 검색합니다. 여러 교차가 가능한 경우 전체 배열을 반복하고 애플리케이션의 논리에 따라 가장 적합한 결과를 선택해야 할 수 있습니다.
• hit.getPose(xrSession.referenceSpace): 지정된 참조 공간에서 히트 지점의 포즈를 가져옵니다.
• virtualObject.position.set(...) 및 virtualObject.quaternion.set(...): 히트 지점의 포즈와 일치하도록 가상 객체(예: three.js Mesh)의 위치와 회전(사원수)을 업데이트합니다.
• 시각적 피드백: 이 예제에는 사용자가 장면에 대해 상호 작용하는 위치를 이해하는 데 도움이 되도록 원 또는 간단한 마커와 같은 히트 지점에서 시각적 피드백을 표시하는 코드도 포함되어 있습니다.

고급 히트 테스트 기술

위의 기본 예제 외에도 히트 테스트 구현을 향상시키는 데 사용할 수 있는 몇 가지 고급 기술이 있습니다.

일시적 입력으로 히트 테스트

버튼 누름 또는 손 제스처와 같은 일시적 입력으로 트리거되는 상호 작용의 경우 XRSession.requestHitTestSourceForTransientInput() 메서드를 사용할 수 있습니다. 이 메서드는 단일 입력 이벤트에 특정적인 히트 테스트 소스를 생성합니다. 이는 지속적인 히트 테스트를 기반으로 하는 의도하지 않은 상호 작용을 방지하는 데 유용합니다.

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

히트 테스트 결과 필터링

경우에 따라 레이 원점으로부터의 거리 또는 교차된 표면의 유형과 같은 특정 기준에 따라 히트 테스트 결과를 필터링할 수 있습니다. 이를 위해서는 히트 테스트 결과를 얻은 후 XRHitTestResult 배열을 수동으로 필터링하면 됩니다.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

다른 참조 공간 사용

참조 공간(viewerSpace, local, localFloor 또는 기타 사용자 지정 공간)의 선택은 히트 테스트 결과가 해석되는 방식에 큰 영향을 미칩니다. 다음 사항을 고려하십시오.

• viewerSpace: 뷰어의 위치를 기준으로 결과를 제공합니다. 이는 사용자의 시선에 직접 연결된 상호 작용을 만드는 데 유용합니다.
• local: XR 원점(XR 세션의 시작점)을 기준으로 결과를 제공합니다. 이는 객체가 실제 환경에 고정되어 있는 경험을 만드는 데 적합합니다.
• localFloor: local과 유사하지만 Y축이 바닥과 정렬됩니다. 이는 바닥에 객체를 배치하는 프로세스를 단순화합니다.

애플리케이션의 요구 사항에 가장 잘 맞는 참조 공간을 선택하십시오. 다양한 참조 공간을 실험하여 동작과 제한 사항을 이해하십시오.

히트 테스트를 위한 최적화 전략

히트 테스트는 특히 복잡한 장면에서 계산 집약적인 프로세스일 수 있습니다. 고려해야 할 몇 가지 최적화 전략은 다음과 같습니다.

• 히트 테스트 빈도 제한: 프레임마다 수행하는 대신 필요할 때만 히트 테스트를 수행합니다. 예를 들어 사용자가 장면에 적극적으로 상호 작용할 때만 히트 테스트를 수행할 수 있습니다.
• 경계 볼륨 계층(BVH) 사용: 많은 수의 객체를 대상으로 히트 테스트를 수행하는 경우 BVH를 사용하여 교차점 계산을 가속화하는 것을 고려하십시오. three.js 및 Babylon.js와 같은 라이브러리는 내장 BVH 구현을 제공합니다.
• 공간 분할: 장면을 더 작은 영역으로 나누고 교차점이 포함될 가능성이 있는 영역에 대해서만 히트 테스트를 수행합니다. 이를 통해 확인해야 하는 객체의 수를 크게 줄일 수 있습니다.
• 다각형 수 줄이기: 테스트해야 하는 다각형 수를 줄이기 위해 모델의 기하학적 구조를 단순화합니다. 특히 모바일 장치에서 성능을 향상시킬 수 있습니다.
• WebWorker: 계산을 웹 작업자에게 오프로드하여 히트 테스트 프로세스가 주 스레드를 잠그지 않도록 합니다.

플랫폼 간 고려 사항

WebXR은 플랫폼 간 호환을 목표로 하지만 다양한 장치와 브라우저에서 동작에 약간의 차이가 있을 수 있습니다. 다음 사항을 명심하십시오.

• 장치 기능: 모든 장치가 모든 WebXR 기능을 지원하는 것은 아닙니다. 기능 감지를 사용하여 사용 가능한 기능을 파악하고 그에 따라 애플리케이션을 조정하십시오.
• 입력 프로필: 다른 장치에서 다른 입력 프로필(예: 일반 터치 스크린, 핸드 추적, 게임패드)을 사용할 수 있습니다. 애플리케이션이 여러 입력 프로필을 지원하고 적절한 대체 메커니즘을 제공하는지 확인하십시오.
• 성능: 성능은 장치에 따라 크게 달라질 수 있습니다. 지원하려는 가장 낮은 수준의 장치에 대해 애플리케이션을 최적화하십시오.
• 브라우저 호환성: Chrome, Firefox, Edge와 같은 주요 브라우저에서 앱을 테스트하고 작동하는지 확인하십시오.

히트 테스트를 사용하는 WebXR 애플리케이션의 글로벌 예

다음은 히트 테스트를 효과적으로 활용하여 매력적이고 직관적인 사용자 경험을 만드는 WebXR 애플리케이션의 몇 가지 예입니다.

• IKEA Place (스웨덴): 사용자가 AR을 사용하여 집에 IKEA 가구를 가상으로 배치할 수 있습니다. 히트 테스트는 가구를 바닥 및 기타 표면에 정확하게 배치하는 데 사용됩니다.
• Sketchfab AR (프랑스): 사용자가 Sketchfab의 3D 모델을 AR로 볼 수 있습니다. 히트 테스트는 모델을 실제 세계에 배치하는 데 사용됩니다.
• 증강 이미지(다양): 많은 AR 애플리케이션은 이미지 추적과 히트 테스트를 결합하여 가상 콘텐츠를 실제 세계의 특정 이미지 또는 마커에 고정합니다.
• WebXR 게임(글로벌): 많은 게임이 WebXR을 사용하여 개발되고 있으며, 그 중 많은 게임이 객체 배치, 상호 작용 및 탐색을 위해 히트 테스트에 의존합니다.
• 가상 투어(글로벌): 위치, 박물관 또는 부동산의 몰입형 투어는 종종 사용자가 가상 환경 내에서 탐색하고 상호 작용하는 요소를 위해 히트 테스트를 사용합니다.

결론

WebXR 히트 테스트 결과 및 레이 캐스팅 처리를 숙달하는 것은 웹에서 매력적이고 직관적인 AR 및 VR 경험을 만드는 데 필수적입니다. 이 블로그 게시물에 설명된 기본 개념을 이해하고 기술을 적용함으로써 가상 세계와 실제 세계를 원활하게 혼합하거나 자연스럽고 직관적인 사용자 상호 작용으로 매력적인 가상 환경을 구축할 수 있습니다. 성능을 위해 히트 테스트 구현을 최적화하고 모든 사용자를 위해 원활한 경험을 보장하기 위해 플랫폼 간 호환성을 고려하십시오. WebXR 생태계가 계속 발전함에 따라 히트 테스트 API에 대한 추가 발전과 개선을 예상하여 몰입형 웹 개발을 위한 더 많은 창의적인 가능성을 열어갈 것입니다. 항상 최신 WebXR 사양 및 브라우저 설명서를 참조하여 최신 정보를 확인하십시오.